<template>
  <el-dialog title="查看订单信息" :visible.sync="dialogorderdetail">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="first">
          <div class="orderInfo">
            <div class="orderInfo-item">
              <span class="name">后台订单：</span>
              <span>{{ orderInfoList.xmbzNo }}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">平台订单：</span>
              <span>{{ orderInfoList.platformOrderId }}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">分仓：</span>
              <span>{{ orderInfoList.receiverAddress }}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">收货人：</span>
              <span>{{ orderInfoList.receiverName }}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">收货电话：</span>
              <viewReceiverPhone :orderInfo="orderInfoList" ref="viewReceiverPhone"></viewReceiverPhone>
            </div>
            <div class="orderInfo-item">
              <span class="name">配送时间：</span>
              <span
                >{{ orderInfoList.deliveryStartTime }}~{{
                  orderInfoList.deliveryEndTime
                }}</span
              >
            </div>
            <div class="orderInfo-item">
              <span class="name">配送备注：</span>
              <span>{{ orderInfoList.deliveryNotes }}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">客户备注：</span>
              <span>{{ orderInfoList.customerNotes }}</span>
            </div>
            <div class="orderInfo-item">
              <span class="name">客服备注：</span>
              <span>{{ orderInfoList.customerServiceNotes }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品信息" name="second">
          <div class="goodInfo">
            <div
              class="goodInfomain"
              v-for="(child, index2) in goodInfoData"
              :key="index2"
            >
              <div class="goodInfo-item">
                <span class="name">蛋糕：</span>
                <span>{{ child.goodsName }}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">价格：</span>
                <span v-if="child.totalPrice">{{
                  child.totalPrice / 100
                }}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">规格：</span>
                <span>{{ child.goodsSpecs }}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">数量：</span>
                <span>{{ child.num }}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">状态：</span>
                <span>{{ child.productionStateName }}</span>
              </div>
              <div class="goodInfo-item">
                <span class="name">祝福语：</span>
                <span>{{ child.blessings }}</span>
              </div>
            </div>
            <div class="goodInfototal">
              所选蛋糕总计:
              <span>{{ goodInfototal }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配送地址" name="third">
          <div class="map">
            <div class="">
              <p>
                <span class="order-messageing">配送地址：</span>
                <span>{{ orderInfoList.receiverAddress }}</span>
              </p>
            </div>
            <XmMap :options="{id: 'orderInfoDialogMap'}" ref="xmMap" style="width: 100%;height: 400px"></XmMap>
          </div>
        </el-tab-pane>
        <el-tab-pane label="订单日志" name="fourth" style="min-height: 500px">
          <div class="radio" style="margin-bottom: 20px; font-size: 15px">
            显示方式：
            <el-radio-group v-model="reverse">
              <el-radio :label="true">倒序</el-radio>
              <el-radio :label="false">正序</el-radio>
            </el-radio-group>
          </div>
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(item, index) in activities"
              :key="index"
              placement="top"
              style="font-size: 15px"
            >
              <el-card
                style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 90%"
              >
                <h4 style="margin-left: 8px">{{ item.operator }}</h4>
                <h4 v-html="item.action"></h4>
                <p style="margin-left: 8px; color: #5e6d82">
                  {{ item.updateTime }}
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
</template>

<script>
import {
  getOrderInfo,
  getOrderOperateLog,
  getOrderGoodsInfo, //商品信息
} from "@/api/orderDispatch";
import viewReceiverPhone from "./viewReceiverPhone"
export default {
  data() {
    return {
      dialogorderdetail: false,
      activeName: "first", //生产详情显示状态
      goodInfoData: [],
      orderInfoList: {},
      goodInfototal: "", //商品信息价格
      reverse: false,
      activities: [],
    }
  },
  methods: {
    show(order) {
      this.dialogorderdetail = true
      this.orderInfoList = order
      this.activeName = "first";
      this.reverse = false;
      this.$refs.viewReceiverPhone && this.$refs.viewReceiverPhone.init()
    },
    handleClick(tab) {
      if (tab.index == "0") {
        getOrderInfo({
          orderId: this.orderInfoList.id,
        }).then((res) => {
          this.orderInfoList = res.data.data;
        });
      } else if (tab.index == "1") {
        getOrderGoodsInfo({
          orderId: this.orderInfoList.id,
        }).then((res) => {
          this.goodInfoData = res.data.data;
          var goodInfototal = [];
          this.goodInfoData.map((item) => {
            goodInfototal.push(item.totalPrice);
          });
          goodInfototal.reduce(function (total, currentValue) {
            goodInfototal = total + currentValue;
            return goodInfototal;
          });
          this.goodInfototal = goodInfototal / 100;
        });
      } else if (tab.index == "2") {
        getOrderInfo({
          orderId: this.orderInfoList.id,
        }).then((res) => {
          this.$nextTick(() => {
            this.$refs.xmMap.clearMap()
            this.addMarker();
          })
        });
      } else if (tab.index == "3") {
        getOrderOperateLog({
          orderId: this.orderInfoList.id,
        }).then((res) => {
          this.activities = res.data.data;
        });
      }
    },
    //地图锚点
    addMarker() {
      const marker = this.$refs.xmMap.createMarker({
        longitude: this.orderInfoList.longitude,
        latitude: this.orderInfoList.latitude,
        label: {
          content: `<div class='info'>${this.orderInfoList.receiverAddress}</div>`
        },
      })
      this.$refs.xmMap.map.add([marker])
      this.$refs.xmMap.setZoomAndCenter(13, [this.orderInfoList.longitude, this.orderInfoList.latitude])
    },
  },
  components: {
    viewReceiverPhone
  }
}
</script>

<style lang="scss" scoped>
.orderInfo {
  .orderInfo-item {
    display: flex;
    line-height: 40px;
    display: flex;
    color: #8c8989;

    .name {
      display: block;
      width: 120px;
      color: #000;
    }
  }
}
.goodInfo {
  .goodInfomain {
    webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #606266;
    transition: 0.3s;
    margin-bottom: 10px;
    padding: 10px;

    .goodInfo-item {
      display: flex;
      line-height: 24px;

      .name {
        display: block;
        color: #000;
      }
    }
  }

  .goodInfototal {
    font-weight: 500;
    font-size: 18px;
  }
}
</style>